<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8"%>
<%@ include file="../include/head.jsp"%>
<%@ include file="../include/top.jsp"%>
<%@ include file="../include/left.jsp"%>

<div class="main-content">

	<%@ include file="../include/navigate.jsp" %>
	
	<div class="container">
		<div class="widget-box">
			<div class="widget-box-header">
				<div class="col-sm-2">
					<div class="title">
						<i class="icon-edit">&nbsp;</i>修改角色
					</div>
				</div>
			</div>
			<div class="widget-box-content" style="padding: 15px;">
				<div id="saveStatus"></div>
				<form class="form-horizontal" role="form" action="${pageContext.request.contextPath}/role/edit" method="post">
					<input type="hidden" id="roleId" value="${role.roleId}" />
					<div class="form-group">
						<label class="col-sm-2 control-label">角色名称:</label>
 
						<div class="col-sm-8">
							<input type="text" class="input-mask-rolename" style="width:100%;" id="roleName" data-toggle="tooltip" data-placement="left" value="${role.roleName}" required>
						</div>
						 
						<div class="col-sm-2 control-label" id="rolename_tips" style="text-align:left;color:#D16E6C;" hidden="true" >字符长度必须超过2!</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">说明:</label>

						<div class="col-sm-8">
							<input type="text" class="input-mask-des" style="width:100%;" id="roleDes" value="${role.des}" oninput="validate(this)" onclick="validate(this)" required>
						</div>
						
						<div class="col-sm-2 control-label" id="des_tips" style="text-align:left;color:#D16E6C;" hidden="true" >不能为空!</div>

					</div>

					<div class="form-group">
						<label class="col-sm-2 control-label">权限设置:</label>
						<div class="col-sm-8">
							<table class="table table-hover table-bordered">
								<tbody>
								
								<td><strong>菜单项</strong></strong></td>
								<td><strong>可执行操作</strong></strong></td>
								
								<c:forEach items="${permissionArray}" var="permission">
									<c:set var="isPrint" value="true"></c:set>
									<c:forEach items="${permission.value}" var="subPermission">
										<tr>
											<c:if test="${isPrint}">
												<c:set var="isPrint" value="false"></c:set>
												<td rowspan="${permission.value.size()}"><input type="checkbox" name="${permission.key}" onclick="cascadeSub(this)"></input>&nbsp;&nbsp;${permission.key}</td>
											</c:if>
											<c:set var="permissionArray" value="${subPermission.code.split(':')}"></c:set>
											<c:set var="permissionArrayLength" value="${fn:length(permissionArray)}"></c:set>
											<c:set var="printChecked" value="${(subPermission.enable=='true')? 'checked':''}"></c:set>
											<c:set var="printDisable" value="${(subPermission.editable=='false')? 'disabled':''}"></c:set>
											<td><input type="checkbox" value="${subPermission.code}" name="${permission.key}_sub" ${printChecked} ${printDisable} onclick="cascadeParent(this)">&nbsp;&nbsp;${permissionArray[permissionArrayLength - 1]}</input></td>
										</tr>
									</c:forEach>
								</c:forEach>
								</tbody>
							</table>
						</div>
					</div>
					
					<div class="form-group">
						<label class="col-sm-2 control-label"></label>

						<div class="col-sm-2">
							<button type="button" class="btn btn-success" onclick="submitRoleData()">提交</button>
							<a type="button" class="btn btn-primary" href="${pageContext.request.contextPath}/role/list"> 返回列表</a>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div style="position: fixed; bottom: 0px; width: 100%;" align="center">
			<%@ include file="../include/footer.jsp"%>
		</div>
	</div>

<script type="text/javascript">
	$('.input-mask-rolename').inputmask('a{2,}', {
		onincomplete : function() {
			$('#rolename_tips').prop("hidden", false);
		},
		oncomplete : function() {
			$('#rolename_tips').prop("hidden", true);
		},
		clearMaskOnLostFocus: false,
		insertMode: true
	});

	function validate(button){
		if($(button).val().length < 1){
			$('#des_tips').prop("hidden", false);
			return false;
		} else {
			$('#des_tips').prop("hidden", true);
			return true;
		}
	}
	
</script>

	<script type="text/javascript">
		$(document).ready(function(){
			
			function setParentStatus(parentNode){
				var parentName = $(parentNode).attr("name");
				var parentNode = $(":checkbox[name=" + parentName + "]");
				var childrenNodes = $(":checkbox[name=" + parentName + "_sub]");
				
				var childrenNum = childrenNodes.length;
				var checkedNum = 0;
				var disableNum = 0;
				$.each(childrenNodes, function(index, value){
					if(true == $(value).prop("checked")){
						checkedNum++;
					}
					
					if(true == $(value).prop("disabled")){
						disableNum++;
					}
				});
				
				if(checkedNum == 0){
					parentNode.prop("checked", false);
					parentNode.prop("indeterminate", false);
				} else if(checkedNum > 0 && checkedNum < childrenNum){
					parentNode.prop("indeterminate", true);
				} else{
					parentNode.prop("indeterminate", false);
					parentNode.prop("checked", true);
				}
				
				if(disableNum > 0){
					parentNode.prop("disabled", true);
				}
			}
			
			function InitParentStatus(){
				parentNodes = $(":checkbox").not(":checkbox[name$='_sub']"); // select all parent node
				$.each(parentNodes, function(index, value){
					setParentStatus(value);
				});
			}
			
			InitParentStatus();
			
			window.cascadeSub = function(parentNode){
				var parentName = $(parentNode).attr("name");
				var parentStatus = $(parentNode).prop("checked");
				var childrenName = parentName + "_sub";
				
				if(true == parentStatus){ // if parent node checked? if checked, checked sub nodes
					$.each($(":checkbox[name=" + childrenName + "]"), function(index, value){
						$(value).prop("checked", true);
					});
				} else {
					$.each($(":checkbox[name=" + childrenName + "]"), function(index, value){
						$(value).prop("checked", false);
					});
				}
			};
			
			window.cascadeParent = function(childNode){
				var childName = $(childNode).attr("name");
				var parentName = childName.replace("_sub", "");
				var parentNode = $(":checkbox[name=" + parentName + "]");
				
				setParentStatus(parentNode);
			};
			
			window.check = function() {
				if (!$('.input-mask-rolename').inputmask("isComplete")){
					$('#rolename_tips').prop("hidden", false);
					return false;
				}
				
				return validate($('.input-mask-des'));
			};
			
			window.getPermissions = function(){
				var permissions = "";
				$.each($(":checked[name$='_sub']"), function(index, value){
					permissions += $(value).val() + ";";
				});
				
				return permissions;
			};
			
			window.submitRoleData = function(){
				
				if(!check()){
					scroll(0, 0);
					return false;
				}
				
				$.ajax({  
		        	type:'post',
		            url: '/role/edit',
		            data: {"roleId": $("#roleId").val(), "roleName": $('#roleName').val(), "des": $("#roleDes").val(), "permissions": encodeURI(getPermissions())},  
		            cache:false,    
		            dataType:'json',    
		            success: function(data) {  
		            	if(data == 'success'){
							operationSuccess();
						} else {
							operationFailedWithMessage(data);
						}
		            },    
		            error : function() {
		            	operationFailed();
		            }
		        });
				
			}
		});
	</script>

	<%@ include file="../include/bottom.jsp"%>